﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" href="/static/layui-v2.5.5/css/layui.css">
<script type="text/javascript" src="/static/layui-v2.5.5/layui.all.js"></script>
</head>
<style type="text/css">
  body{ background:#000d4a url(/static/img/login.png) center top; background-size:cover;color:#666;}
  .layui-form-label{background-color: rgba(0,139,139,.64);color: white;font-weight: bold;}
  .layui-input{background-color: rgba(255,255,255,.54);color: #2F4056;border: 0}
</style>
<body>
<div style="padding: 20px; background-color: rgba(255,255,255,.24);position: absolute;top: 25%;right: 20%;width: 20%;box-shadow: 10px">
  <div style="text-align: center;font-size: 17px;font-weight: bold;color: #009688"><h2>管理后台登录</h2></div>
  <br>
  <form class="layui-form" action="" style="border: 10px;padding: 20px;">
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label " style="text-align: center;"><i class="layui-icon layui-icon-username" for="username"></i> 用户名</label>
        <div class="layui-input-block">
          <input  type="text" id="una" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label " style="text-align: center;"><i class="layui-icon layui-icon-password" for="password"></i> 密码</label>
        <div class="layui-input-block">
          <input  type="password" id="pwd" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label " style="text-align: center;"><i class="layui-icon layui-icon-auz" ></i> 验证码</label>
        <div class="layui-input-inline" style="width: 40%">
          <input  type="text" name="captcha" lay-verify="required|captcha" placeholder="验证码" autocomplete="off" class="layui-input verification captcha">
        </div>
        <div class="layui-form-mid layui-word-aux" >
          <a id="captchaPic"></a>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <div class="layui-input-inline" style="width: 40%">
          <input type="checkbox" name="rememberMe" checked=""  lay-skin="primary" title="记住密码" >
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <button style="background-color: rgba(0,139,139,.64);color:white ;font-weight: bold;" class="layui-btn layui-btn-fluid sty4" lay-submit="" lay-filter="login"><i class="layui-icon layui-icon-release sty2" ></i> 登 入</button>
    </div>
    <br>
    <a class="layui-btn layui-btn-xs" onclick="taste()" style="background-color: rgba(255,255,255,.04);color:blue ">我要体验>></a>
    <div class="" style="text-align: center;">
      <div>
        <br>
        <p style="color: #009688">网站内容解释权归本公司所有</p>
        <a style="color: #009688" href="https://beian.miit.gov.cn/#/Integrated/index">备案号：粤ICP备18024101号</a>
      </div>
    </div>
  </form> 
</div>

<script type="text/javascript">



var form = layui.form;
var layer = layui.layer;
var $=layui.$
form.render()

// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;

var ht=$(window).height()/937
var wh=$(window).width()/1915

var login_func=function(login_data){

  $.ajax({
    type: 'POST',
    data:login_data,
    url:"",
    async:true,
    dataType: 'json',
    success: function(data) {
      // location.reload();
      // console.log(data)
      if (data.code == 1000) {
        if(login_data.rememberMe==='on'){
          layui.data('logindata',{key:'logindata',value:{'username':login_data.username,'password':login_data.password}})
        }else{
          if(layui.data('logindata').logindata!=null){
              layui.data('logindata', {
              key: 'logindata'
              ,remove: true
            });
          }
        }
        window.location.href = '/index';
       }else{
        alert(data.error)
       }
    },
    error:function(e){
      alert('连接错误')
    }
  });
}

var taste=function(){
  var taste_data={'username':'demo','password':'123456'};
  login_func(taste_data)
}


var yz_code=Math.ceil(Math.random()*10000)
$('#captchaPic').text(yz_code)

if(layui.data('logindata').logindata!=null){
    var logindata=layui.data('logindata').logindata
    $('#una').val(logindata.username)
    $('#pwd').val(logindata.password)

  }
  
  // 进行登录操作
  form.on('submit(login)', function (form_data) {
      login_data = form_data.field;
      // console.log(login_data)
      if (login_data.username == '') {
          layer.msg('用户名不能为空');
          return false;
      }
      if (login_data.password == '') {
          layer.msg('密码不能为空');
          return false;
      }
      if (login_data.captcha == '') {
          layer.msg('验证码不能为空');
          return false;
      }else if($('#captchaPic').text()!==login_data.captcha){
          layer.msg('验证码不正确');
          return false;
      }

      // console.log(login_data)
      login_func(login_data)
      
      return false;
  });

</script>
</body>
</html>
